<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="全部">
        <van-cell-group
          v-for="(item, index) in all"
          :key="index"
          style="margin-bottom: 20px"
        >
          <van-cell
            :title="`配送时间${item.reserve_time}`"
            :value="item.status"
            value-class="status"
            title-class="time"
            title-style="flex-gorw:2"
          />
          <van-card
            v-for="i in item.product"
            :key="'pro'+i.cid"
            :num="i.count"
            :price="i.cake_price"
            :title="i.cakename"
            :thumb="i.cake_pic"
            @click="$router.push(`/detail?name=${i.cakename}`)"
          >
            <template #footer>
              <van-button
                v-show="item.status == '已完成'"
                @click.stop="$router.push(`/my_comments?name=${i.cakename}&img=${i.cake_pic}`)"
              >填写评价</van-button>
            </template>
          </van-card>
          <van-cell
            :title="'实付：￥' + item.total_price"
            center
            style="color: #ff4001"
          >
            <template #right-icon v-if="item.status == '待付款'">
              <van-button color="#ff8e68" @click="finish(item)">取消支付</van-button>
              <van-button color="#ff4001">
                去付款
                <van-count-down
                  :time="item.time"
                  format="剩余：mm分ss秒"
                  style="color: white"
                  @finish="finish(item)"
                />
              </van-button>
            </template>
            <template #right-icon v-else-if="item.status == '待发货'">
              <van-button color="#ff4001" @click="remind">提醒发货</van-button>
            </template>
            <template #right-icon v-else-if="item.status == '待收货'">
              <van-button color="#ff4001" @click="confirm(item)"
                >确认收货</van-button
              >
            </template>
            <template #right-icon v-else-if="item.status == '已取消'">
              <van-button color="#525252">已取消</van-button>
            </template>
            <template #right-icon v-else>
              <van-button color="#ff4001">已完成</van-button>
            </template>
          </van-cell>
        </van-cell-group>
        <empty v-show="all.length == 0"></empty>
      </van-tab>
      <van-tab title="待付款">
        <van-cell-group
          v-for="item in unpaid"
          :key="item.oid"
          style="margin-bottom: 20px"
        >
          <van-cell
            :title="`配送时间${item.reserve_time}`"
            :value="item.status"
            value-class="status"
            title-class="time"
            title-style="flex-gorw:2"
          />
          <van-card
            v-for="i in item.product"
            :key="i.cid"
            :num="i.count"
            :price="i.cake_price"
            :title="i.cakename"
            :thumb="i.cake_pic"
            @click="$router.push(`/detail?name=${i.cakename}`)"
          >
          </van-card>
          <van-cell
            :title="'实付：￥' + item.total_price"
            center
            style="color: #ff4001"
          >
            <template #right-icon>
              <van-button color="#ff8e68" @click="finish(item)"
                >取消支付</van-button
              >
              <van-button color="#ff4001">
                去付款
                <van-count-down
                  :time="item.time"
                  format="剩余：mm分ss秒"
                  style="color: white"
                />
              </van-button>
            </template>
          </van-cell>
        </van-cell-group>
        <empty v-show="unpaid.length == 0"></empty>
      </van-tab>
      <van-tab title="待发货">
        <van-cell-group
          v-for="item in nosend"
          :key="item.oid"
          style="margin-bottom: 20px"
        >
          <van-cell
            :title="`配送时间${item.reserve_time}`"
            :value="item.status"
            value-class="status"
            title-class="time"
            title-style="flex-gorw:2"
          />
          <van-card
            v-for="i in item.product"
            :key="i.cid"
            :num="i.count"
            :price="i.cake_price"
            :title="i.cakename"
            :thumb="i.cake_pic"
            @click="$router.push(`/detail?name=${i.cakename}`)"
          >
          </van-card>
          <van-cell
            :title="'实付：￥' + item.total_price"
            center
            style="color: #ff4001"
          >
            <template #right-icon>
              <van-button color="#ff4001" @click="remind">提醒发货</van-button>
            </template>
          </van-cell>
        </van-cell-group>
        <empty v-show="nosend.length == 0"></empty>
      </van-tab>
      <van-tab title="待收货">
        <van-cell-group
          v-for="item in send"
          :key="item.oid"
          style="margin-bottom: 20px"
        >
          <van-cell
            :title="`配送时间${item.reserve_time}`"
            :value="item.status"
            value-class="status"
            title-class="time"
            title-style="flex-gorw:2"
          />
          <van-card
            v-for="i in item.product"
            :key="i.cid"
            :num="i.count"
            :price="i.cake_price"
            :title="i.cakename"
            :thumb="i.cake_pic"
            @click="$router.push(`/detail?name=${i.cakename}`)"
          >
          </van-card>
          <van-cell
            :title="'实付：￥' + item.total_price"
            center
            style="color: #ff4001"
          >
            <template #right-icon>
              <van-button color="#ff4001" @click="confirm(item)"
                >确认收货</van-button
              >
            </template>
          </van-cell>
        </van-cell-group>
        <empty v-show="send.length == 0"></empty>
      </van-tab>
      <van-tab title="已完成">
        <van-cell-group
          v-for="item in end"
          :key="item.oid"
          style="margin-bottom: 20px"
        >
          <van-cell
            :title="`配送时间${item.reserve_time}`"
            :value="item.status"
            value-class="status"
            title-class="time"
            title-style="flex-gorw:2"
          />
          <van-card
            v-for="i in item.product"
            :key="i.cid"
            :num="i.count"
            :price="i.cake_price"
            :title="i.cakename"
            :thumb="i.cake_pic"
            @click="$router.push(`/detail?name=${i.cakename}`)"
          >
            <template #footer>
              <van-button
                v-show="item.status == '已完成'"
                @click.stop="
                  $router.push(
                    `/my_comments?name=${i.cakename}&img=${i.cake_pic}`
                  )
                "
                >填写评价</van-button
              >
            </template>
          </van-card>
          <van-cell
            :title="'实付：￥' + item.total_price"
            center
            style="color: #ff4001"
          >
            <template #right-icon>
              <van-button color="#ff4001">已完成</van-button>
            </template>
          </van-cell>
        </van-cell-group>
        <empty v-show="end.length == 0"></empty>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Empty from "../../components/Empty/Empty.vue";
export default {
  components: { Empty },
  data() {
    return {
      active: 0,
      all: [],
      unpaid: [],
      nosend: [],
      send: [],
      end: [],
      cancel: [],
    };
  },
  mounted() {
    this.active = this.$route.query.id * 1;
    let token = localStorage.getItem("token");
    // 获取订单id
    this.$get("/v1/order/get", token).then((res) => {
      this.all = res.data.data;
      let newtime=this.moment(new Date()).unix()*1000
      this.all.forEach((item) => {
        if(item.status=="待付款"){
          item.time=item.order_number-item.order_number%1000+20*60*1000-newtime;
          if(item.time<=0){
            item.time=1;
          }
        }
        let params = { order_id: item.oid };
        this.$get("/v1/order/getdetail", params).then((res) => {
          item.product = Array.prototype.slice.call(res.data.data);
          this.$forceUpdate()
        });
        item.status == "待付款"
          ? this.unpaid.push(item)
          : item.status == "待发货"
          ? this.nosend.push(item)
          : item.status == "待收货"
          ? this.send.push(item)
          : item.status == "已完成"
          ? this.end.push(item)
          : this.cancel.push(item);
      });
    //console.log(this.all);
    });
  },
  methods: {
    remind() {
      this.$dialog.alert({
          message: "我们已收到您的催单请求",
        })
        .then({
          // on close
        });
    },
    confirm(item) {
      let params = { oid: item.oid };
    //console.log(0);
    //console.log(params);
    //console.log(1);
      this.$get("/v1/order/confirm", params).then((res) => {
      //console.log(res);
        item.status = "已完成";
      });
    },
    finish(item) {
      let params = { oid: item.oid };
    //console.log(params);
      this.$get("/v1/order/finish", params).then((res) => {
      //console.log(res);
        item.status = "已取消";
      });
    },
    detail(i){
      
      $router.push(`/detail?name=${i.cakename}`)
    }
  },
};
</script>
<style lang="scss" scoped>
.time {
  min-width: 70%;
  flex-grow: 3;
}
.status {
  color: #ff4001;
}
</style>